import React from 'react'
import PropTypes from 'prop-types'
import './Section.css'

class Section extends React.Component {
    // constructor(props) {
    //     super(props);
    //     console.log(props)
    //     this.state = {
    //         list: this.props.todoList
    //     }
    // }
    static propTypes = {
        todoList: PropTypes.array.isRequired,
        changeTodo: PropTypes.func.isRequired
    }

    state = {
        mouse: false
    }

    handleMouse = (flag) => {
        // console.log(flag)
        this.setState({mouse:flag})
    }
    handleCheck = (id,event) => {
        const {target} = event
        // console.log(id,event.target.checked)
        this.props.changeTodo(id,target.checked)
    }
    //删除数据
    handleDelete = (id) => {
        // console.log(id)
        if(window.confirm("确定删除吗？")) {
            this.props.deleteTodo(id)
        }

    }
    render() {
        // console.log(this.props)
        const {todoList} = this.props
        const {mouse} = this.state
        return (
            <div className="Section">
                <ul>
                    {
                        todoList.map(item => {
                           return(
                               <li key={item.id} onMouseEnter={() => this.handleMouse(true)} onMouseLeave={() => this.handleMouse(false)}>
                                   <label htmlFor="">
                                       <input type="checkbox" checked={item.done} onChange={(event) => this.handleCheck(item.id,event)}/>
                                       <span>{item.name}</span>
                                   </label>
                                   <button onClick={() => this.handleDelete(item.id)}>删除</button>
                               </li>
                           )
                       })
                    }

                </ul>
            </div>
        )
    }
}

export default Section